<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header">
	<style type="text/css">
		html,body{
			width:100%;
			height:100%;
		}
		#container{
			width:100%;
			height:90%;
		}
		*{
			margin:0px;
			padding:0px;
		}
		body, button, input, select, textarea {
			font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
		}
		p{
			width:603px;
			padding-top:3px;
			overflow:hidden;
		}
	</style>
</head>
<th:block th:include="include :: jasny-bootstrap-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-communityManage-add">
			<input id="companyId" name="companyId" class="form-control" th:value="${companyId}" type="hidden">
			<!-- 经度 -->
			<input id="longitude" name="longitude" class="form-control" type="hidden">
			<!-- 纬度 -->
			<input id="latitude" name="latitude" class="form-control" type="hidden">

			<div class="form-group">
				<label class="col-sm-3 control-label">小区名称：</label>
				<div class="col-sm-8">
					<input id="communityName" name="communityName" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">封面图：</label>
				<div class="col-sm-5">
					<div class="fileinput fileinput-new" data-provides="fileinput">
						<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 120px;">
							<img id="communityLogoimg">
						</div>
						<div>
							<span class="btn btn-white btn-file"><span class="fileinput-new">选择封面</span><span class="fileinput-exists">更改</span><input type="file" id="img"></span>
							<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
							<span style="width: 200px; height: 120px; color: red">请选择1M以内图片</span>
						</div>
					</div>
					<input id="communityLogo" name="communityLogo" type="hidden"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">详细地址：</label>
				<div class="col-sm-8">
					<input id="detailAddress" name="detailAddress" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地图选点：</label>
				<div class="col-sm-8">
					<!--   显示地图的区域   -->
					<div id="container" style="height:500px;width:100%;"></div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: jasny-bootstrap-js" />
	<th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
		var prefix = ctx + "business/communityManage"
		$("#form-communityManage-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		//默认地图位置
		var lat = '34.259430';
		var lng = '108.947040';

		//腾讯地图
		function init() {
			//设置地图中心点
			var myLatlng = new qq.maps.LatLng(lat,lng);
			//定义工厂模式函数
			var myOptions = {
				zoom: 15,               //设置地图缩放级别
				center: myLatlng,      //设置中心点样式
				mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
			};
			//获取dom元素添加地图信息
			var map = new qq.maps.Map(document.getElementById("container"), myOptions);
			var markPoint;
			//添加定时器(初始化地图标记点)
			setTimeout(function(){
				markPoint=new qq.maps.Marker({
					position:myLatlng,
					animation:qq.maps.MarkerAnimation.BOUNCE,
					map:map
				});
			},2000);
			//添加监听事件(鼠标点击切换标记点)
			qq.maps.event.addListener(map, 'click', function(evt) {
				if(!markPoint) {
					markPoint=new qq.maps.Marker({
						position:evt.latLng,
						map:map
					});
					return;
				}
				markPoint.setPosition(evt.latLng);
				console.log(evt.latLng.getLat().toFixed(6),evt.latLng.getLng().toFixed(6));
				$.ajax({
					type: 'get',
					url: 'https://apis.map.qq.com/ws/geocoder/v1',
					dataType: 'jsonp',
					data: {
						key: "NWQBZ-SIY63-QPR32-YRQW7-KSRK5-BGFOP",//开发密钥
						location: evt.latLng.getLat().toFixed(6) + "," + evt.latLng.getLng().toFixed(6),//位置坐标
						get_poi: "0",//是否返回周边POI列表：1.返回；0不返回(默认)
						output: "jsonp"
					},
					success: function (data, textStatus) {
						if (data.status == 0) {
							$("#detailAddress").val(data.result.address);
						} else {
							alert("位置获取错误，请联系管理员！")
						}
					},
					error: function () {
						alert("位置获取错误，请联系管理员！")
					}
				});
				//将对应的HTML元素设置值
				$("#longitude").val(evt.latLng.getLng().toFixed(6));
				$("#latitude").val(evt.latLng.getLat().toFixed(6));
			});
		}
		//异步加载地图库函数文件
		function loadScript() {
			//创建script标签
			var script = document.createElement("script");
			//设置标签的type属性
			script.type = "text/javascript";
			//设置标签的链接地址
			script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
			//添加标签到dom
			document.body.appendChild(script);
		}
		window.onload = loadScript;    // dom文档加载结束开始加载 此段代码

        $(function(){
            $('#img').on('change.bs.fileinput', function (e) {
                var img = e.currentTarget.files[0];
                var formData = new FormData();
                formData.append("file", img);
                $.ajax({
                    url: ctx + "business/attachment/upload",
                    data: formData,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        $("#communityLogoimg").attr("src",result.url);
                        $("#communityLogo").val(result.url);
                    }
                });
            });
        });

		//失焦 获取详细地址 拿到新执行地图方法
		$("#detailAddress").on('blur',function(){
			console.log(this.value);
			$.ajax({
				type: 'get',
				url: 'https://apis.map.qq.com/ws/geocoder/v1',
				dataType: 'jsonp',
				data: {
					key: "NWQBZ-SIY63-QPR32-YRQW7-KSRK5-BGFOP",//开发密钥
					address: this.value, //地址（注：地址中请包含城市名称，否则会影响解析效果）
					output: "jsonp",
                    level: 10
				},
				success: function (data, textStatus) {
					if (data.status == 0) {
						console.log(data.result.location.lat,data.result.location.lng);
						lat = data.result.location.lat;
						lng = data.result.location.lng;
						init();
					} else {
						alert("请输入完整地址！！！")
					}
				},
				error: function () {
					alert("位置获取错误，请联系管理员！")
				}
			});
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
                let longitude = $("#longitude").val();
                let latitude = $("#latitude").val();
	            if(longitude == "" || latitude == ""){
	                $.modal.alert("请选择好小区坐标！");
	                return false;
				}
	            $.operate.save(prefix + "/add", $('#form-communityManage-add').serialize());
	        }
	    }
	</script>
</body>
</html>
